<template>
	<view>
		<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" backIconSize="40" back-icon-color="#FFFFFF"
		 :background="background">
		</u-navbar>
		<view class="top">
			<image src="../static/2g9.png" class="img"></image>
			<!-- <view class="icon" @click="show=true">
				玩法介绍 <image src="../static/g10.png" mode=""></image>
			</view> -->
			<view class="go_case" @click="toPage('../group/rule2')">
				<image src="../static/2case_bg1.png"></image>
			</view>
			<!-- <view class="icon" @click="toPage('../group/rule')">
				玩法介绍 <image src="../static/g10.png" mode=""></image>
			</view> -->
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="title">
					<view class="icon">
						{{getNumber(index)}}
					</view>
					<view class="name">
						{{item.title}}
					</view>
				</view>
				<view class="down" :style="dataList.length==(index+1)?'border: 0;':''">
					<view class="view">
						<view class="name">
							{{item.name1}}
						</view>
						<image @click="seeImage(item.img1)" :src="item.img1" class="img"></image>
					</view>
					<image src="../static/right.png" class="go"></image>
					<view class="view">
						<view class="name">
							{{item.name2}}
						</view>
						<image @click="seeImage(item.img2)" :src="item.img2" class="img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="button">
			<image src="../static/g11.png" class="left"></image>
			<view class="right">
				<view class="up">
					每天58，月入 <text>1800</text>
				</view>
				<view class="down">
					<u-button class="b1" @click="startFight" :ripple="true">
						发起拼团
					</u-button>
					<u-button class="b2" @click="inviteDetails" :ripple="true">
						接受邀请
					</u-button>
				</view>
			</view>
		</view>
		<view class="div"></view>
		<u-popup :closeable="true" borderRadius="10" mode="center" v-model="show2">
			<view class="popup">
				<view class="popup_top"></view>
				<view class="_view">
					<view class="title">
						拼团提醒
					</view>
					<view class="cont" style="height: auto;">
						您当前可参团团队人数不足<text class="t1">{{count}} <text class="t2">人</text></text>，建议接受拼团
					</view>
					<u-button type="success" :ripple="true" @click="show2=false" class="buttonx b1">等待邀请</u-button>
					<u-button type="success" :ripple="true" @click="startFight2" class="buttonx b2">依然发起</u-button>
				</view>

				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup v-model="show" background="transparent" :closeable="true" borderRadius="10" mode="center">
			<view class="fight">
				<view class="view"></view>
				<view class="head">
					<image :src="getHead(user.head_image)" mode=""></image>
				</view>
				<view class="title_item">
					您被邀请加入亲友团
				</view>
				<view class="appeal">
					如拼团成功您将获得{{user.jiangli}}蜜贝
				</view>
				<button type="default" class="button1" @click="zhidao">接受邀请</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				count:0,
				user: {},
				show: false,
				show2: false,
				dataList: [{
					title: '奇异果蜂巢级别可发起拼团',
					name1: "点击发起拼团",
					name2: "最多选择4人成团",
					img1: "../static/ga0.png",
					img2: "../static/gb0.png"
				}, {
					title: '接受拼团邀请',
					name1: "点击接受拼团邀请",
					name2: "5名成员则组队成功",
					img1: "../static/ga1.png",
					img2: "../static/gb1.png"
				}, {
					title: '预约抢拍成功蜂巢可解锁丰厚奖励',
					name1: "抢拍团员对应级别蜂巢",
					name2: "全抢拍成功解锁奖励",
					img1: "../static/ga2.png",
					img2: "../static/gb2.png"
				}]
			}
		},
		onLoad(option) {
			than = this;
			than.post('api/groupwork_small/inviteDetails', null, function(data) {
				if (than.checkDataNull(data)) {
					than.user = data;
					than.show = true;
				}
			})
		},
		methods: {
			zhidao() {
				than.post('api/groupwork_small/acceptInvite', {
					id: than.user.id
				}, function(data) {
					than.toPage('../group/group2')
				})
			},
			startFight() {
				than.post('api/groupwork_small/findMemberCount', null, function(data) {
					than.count=data.count
					if (data.status) {
						than.startFight2();
					} else {
						than.show2 = true;
					}

				})
			},
			startFight2() {
				than.post('api/groupwork_small/startFight', null, function(data) {
					than.show2 = false;
					than.toPage('../group/group2')
				})
			},
			inviteDetails() {
				than.post('api/groupwork_small/inviteDetails', null, function(data) {
					if (than.checkDataNull(data)) {
						than.user = data;
						than.show = true;
					} else {
						than.toast('暂时未有进团邀请，您可发起拼团参与')
					}
				})
			},
			getNumber(text) {
				var number;
				text += 1;
				if (text < 10) {
					number = "0" + text
				} else {
					number = text
				}
				return number
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #EC6426;
	}

	.popup {
		width: 535rpx;
		background: linear-gradient(0deg, #fcfdff, #e3ebfe);

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx;

			.title {
				padding-top: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.code {
				text-align: center;
				padding-bottom: 40rpx;

				image {
					width: 81rpx;
					height: 81rpx;
				}
			}

			.cont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				padding: 50rpx 80rpx;

				.t1 {
					margin: 0 10rpx;
					font-size: 48rpx;
					font-family: DIN;
					font-weight: bold;
					color: #FEC31D;
				}

				.t2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FEC31D;
				}
			}

			.buttonx {
				width: 314rpx;
				height: 80rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
				border-radius: 40rpx;
			}

			.b1 {
				background: linear-gradient(90deg, #FFA800, #F46813);
				margin-bottom: 31rpx;
			}

			.b2 {
				background: #FDDF8D;
			}
		}
	}

	.fight {
		width: 442rpx;
		height: 583rpx;
		text-align: center;
		background-image: url(../../../static/image/pop.png);
		background-size: 100% 100%;
		padding-bottom: 32rpx;

		.view {
			height: 50rpx;
		}

		.head {
			margin: auto;
			width: 170rpx;
			height: 160rpx;
			background-image: url(../static/g2.png);
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				margin-top: -15rpx;
				margin-left: -5rpx;
				width: 104rpx;
				height: 103rpx;
				border-radius: 50%;
			}
		}

		.title_item {
			padding-top: 52rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #D72A19;
		}

		.appeal {
			margin-top: 43rpx;
			margin-bottom: 70rpx;
			padding: 0 50rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1E0406;
		}

		.icon {
			margin-top: 30rpx;
			text-align: center;

			image {
				width: 86rpx;
				height: 93rpx;
			}
		}

		.button1 {
			width: 314rpx;
			height: 80rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #D72A19;
			line-height: 80rpx;
			background: #FCF5E2;
			border: 4rpx solid #FFB43D;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
		}
	}

	.div {
		position: relative;
		top: 350rpx;
		width: 100%;
		height: 30rpx;
	}

	.button {
		position: relative;
		top: 350rpx;
		bottom: 35rpx;
		width: 678rpx;
		height: 179rpx;
		background: #FDE5D8;
		opacity: 0.9;
		border-radius: 20rpx;
		margin: auto;
		display: flex;
		align-items: center;

		.left {
			width: 113rpx;
			height: 111rpx;
			margin: 0 49rpx 0 31rpx;
		}

		.right {
			.up {
				font-size: 40rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;

				text {
					color: #FF2D01;
				}
			}

			.down {
				display: flex;
				align-items: center;

				.b1 {
					width: 180rpx;
					height: 64rpx;
					background: #FFBA00;
					border-radius: 32rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-right: 31rpx;
				}

				.b2 {
					width: 180rpx;
					height: 64rpx;
					background: #FF2C13;
					border-radius: 32rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	.content {
		top: 330rpx;
		position: relative;
		z-index: 2;
		background: #FFF4EA;
		margin: auto;
		width: 678rpx;
		border-radius: 20rpx;

		.list {
			border-radius: 20rpx;

			.title {
				.icon {
					background: #F34733;
				}
			}

			.down {
				border-left: 5rpx solid #F68649;
			}

			.title {
				display: flex;
				align-items: center;
				background: #FFF4EA;
				height: 120rpx;
				padding: 0 36rpx;
				border-radius: 70rpx;

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 22rpx;
					font-size: 30rpx;
					font-family: DIN Medium;
					font-weight: 400;
					color: #FFFFFF;
				}

				.name {
					width: 500rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #463835;
				}
			}

			.down {
				margin: 0 35rpx 0 58rpx;
				padding-left: 51rpx;
				display: flex;
				align-items: center;

				.view {
					.name {
						line-height: 50rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #555555;
					}

					.img {
						width: 227rpx;
						height: 308rpx;
					}
				}

				.go {
					margin: 0 19rpx;
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}

	.top {
		position: fixed;
		top: 0;
		width: 100%;

		.img {
			width: 100%;
			height: 715rpx;
		}

		.go_case {
			position: absolute;
			right: 0rpx;
			z-index: 3;
			top: 150rpx;

			image {
				width: 52rpx;
				height: 168rpx;
			}
		}

	}
</style>
